<template>
	<view class="flexGap flex-column">
		<view class="showToast">{{showToast}}</view>
		<view v-for="(field, index) in fields" :key="index" class="item-td">
			<template v-if="!filters.includes(field.name)">
				<view class="flexGap">
					<label>{{ field.label }}</label>
					:<template v-if="field.date">
						<MyDatePicker v-if="!field.disabled" v-model="formData[field.name]" :isDouble="false"
							@change="$emit('handle'+field.name,$event)">
						</MyDatePicker>
						<button type="primary" v-else>{{formData[field.name]}}</button>
					</template>
					<MySelect v-else-if="field.options" :options="field.options" v-model="formData[field.name]"
						:disabled="field.disabled" @change="$emit('handle'+field.name,$event)"></MySelect>
					<my-input v-else class="form-input" :type="field.type" v-model="formData[field.name]"
						:placeholder="field.placeholder" :disabled="field.disabled" />
				</view>
			</template>
		</view>
		<button type="primary" @click.prevent="submit">{{ submitText }}</button>
		<slot></slot>
	</view>
</template>

<script>
	import MySelect from '@/components/MySelect.vue';
	import MyDatePicker from '@/components/MyDatePicker.vue';
	export default {
		components: {
			MySelect,
			MyDatePicker
		},
		props: {
			fields: {
				type: Array,
				required: true
			},
			submitText: {
				type: String,
				default: "提交"
			},
			filters: {
				type: Array,
				default: () => []
			},
			updateNames: {
				type: Array,
				default: () => []
			},
		},
		watch: {
			fields: {
				deep: true,
				handler(newVal, oldVal) {
					// 初始化formData
					newVal.forEach(field => {
						if (this.updateNames.includes(field.name)) {
							this.$set(this.formData, field.name, field.value);
						}
					});
				}
			}
		},
		data() {
			return {
				formData: {},
				marginBottom: '0px',
				showToast: ''
			};
		},
		methods: {
			submit() {
				// 检查必填字段是否为空
				const emptyFields = this.fields.filter(field => {
					if (field.required) {
						if (field.options) {
							const some = field.options.some(ot => ot.value === this
								.formData[field
									.name]);
							return !this.formData[field.name] && !some
						} else {
							return !this.formData[field.name]
						}
					}
				});
				if (emptyFields.length > 0) {
					// 提示用户必填字段不能为空
					const fieldLabels = emptyFields.map(field => field.label).join(', ');
					this.showToast = `${fieldLabels}.不能为空`;
					return;
				}
				this.$emit("submit", this.formData);
			}
		},
		created() {
			this.$eventBus.on('myInputFocus', e => {
				this.showToast = '';
				// 监听输入框获取焦点事件，并执行回调函数
				const systemInfo = uni.getSystemInfoSync();
				// 获取系统信息，包括窗口高度等
				const half = systemInfo.windowHeight / 4; // 窗口一半高度
				// 计算窗口一半的高度
				const {
					height,
					offsetTop
				} = e.target;
				// 获取滚动视图的当前滚动位置 
				const top = half >= offsetTop ? 0 : offsetTop - half;
				// 根据输入框的位置和窗口一半高度计算滚动的距离 
				this.marginBottom = top + 'px';
			});

			this.$eventBus.on('myInputBlur', e => {
				this.marginBottom = 0;
			});
			// 初始化formData
			this.fields.forEach(field => {
				this.$set(this.formData, field.name, field.value);
			});
		}
	};
</script>
<style scoped>
	.flexGap {
		white-space: nowrap;
		transition: margin-bottom .5s;
		width: 100%;
	}

	.flexGap>label {
		min-width: 128rpx;
		text-align: right;
	}

	.showToast {
		white-space: normal;
	}

	.item-td {
		display: flex;
	}

	.form-input {
		flex: 1;
	}
</style>